<template>
  <div>
<!--    <div class="front-notice"><i class="el-icon-bell">公告:{{ top }}</i> </div>-->
    <!--头部-->
    <div class="front-header">
      <div class="front-header-left">
        <img src="@/assets/imgs/boy.png" alt="">
<!--         style="width: 100px;height: 100px"-->
      <div class="title">租宿前台页面</div>
    </div>

    <div class="front-header-center">
      <div class="front-header-nav">
        <el-menu :default-active="router.currentRoute.value.path" mode="horizontal" router>
          <el-menu-item index="/front_page/home">首页</el-menu-item>
          <el-menu-item index="/front_page/collection">我的收藏</el-menu-item>
          <el-menu-item index="/front_page/appointment">我的预约</el-menu-item>
          <el-menu-item index="/front_page/notice" >
            <div class="menu-item-wrapper">
              <span>我的消息</span>
              <div v-if="unReadCount > 0" class="red-dot">{{ unReadCount }}</div>
            </div>
          </el-menu-item>
          <el-menu-item index="/front_page/order">我的订单</el-menu-item>
          <el-menu-item index="/front_page/front_person">个人中心</el-menu-item>
        </el-menu>
      </div>
    </div>


    <div class="front-header-right">


      <div v-if="!data.user.username">
        <el-button  @click="router.push('/login')">登录</el-button>
        <el-button  @click="router.push('/register')">注册</el-button>
      </div>
      <div v-else>
        <el-dropdown>
          <div class="front-header-dropdown" style="">
            <img :src="data.user.avatar" alt="" style="">
            <div style="">
              <span>{{ data.user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
<!--              <el-dropdown-item disabled>Action 4</el-dropdown-item>-->
<!--              <el-dropdown-item divided>Action 5</el-dropdown-item>-->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>



    </div>

   </div>

    <!-- 子路由内容显示区域 -->
    <router-view></router-view>

  </div>


</template>

<script setup>
import {HomeFilled,ArrowDown} from "@element-plus/icons-vue"
import router from "../router";
import {reactive, onMounted} from "vue";
import request from "../utils/request";
import {ElMessage} from "element-plus";
import { loadUnreadCount, unReadCount } from '../utils/messageUtils';

const data = reactive({
  user: JSON.parse(localStorage.getItem('localStorageUser')),
});

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('localStorageUser'))
}

const logout = () => {
  localStorage.removeItem('localStorageUser')
  localStorage.removeItem('token')
  location.href = '/login'
}

// 初始化加载未读消息数量
onMounted(async () => {
  if (data.user) {
    await loadUnreadCount(data.user.id, data.user.role);
  }
});

// const handleMaskAsRead = async () => {
//
//   const res = await request.put(`/messages/markAsRead?receiverId=${data.user.id}&receiverType=${data.user.role}`);
//   if (res.code === '200'){
//     data.unReadCount = 0; // 重置未读计数
//     // ElMessage.success('全部标记为已读');
//   }else {
//     ElMessage.error('标记为已读失败:'+res.msg);
//   }
// };
</script>


<style scoped>
@import "../assets/css/front1.css";
/* 菜单项容器（实现红点与文字对齐） */
.menu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 红点样式 */
.red-dot {
  background: #ff4d4f;  /* 红色背景 */
  color: white;         /* 文字白色 */
  border-radius: 10px;  /* 圆形 */
  min-width: 18px;      /* 最小宽度 */
  height: 18px;
  line-height: 18px;    /* 垂直居中 */
  text-align: center;
  font-size: 12px;
  padding: 0 5px;       /* 水平内边距 */
  margin-left: 8px;     /* 与文字间距 */
  font-weight: bold;
}
</style>
